<template>
  <div class="userInfo">
  <l-header :headerText='headerText' class="lheader" :isBack="isBack"></l-header>
    <div class="userInfo-body">
      <div class="Info" >
        <div class="headimg">
          <img class="img-content" :src="headimgurl" alt="小公猪">
        </div>
        <div class="nicknameAndusername">
            <p class="nickname-content">{{nickname}}</p>
            <p class="usernum-content">工号：{{usernum}}</p>
        </div>
      </div>
      <ul class="menu">
        <li class="myorder border-bottom" @click='workRecode'>
            <p class="myorder-content">工作记录</p>
        </li>
        <li class="myorder border-bottom"  @click='modifyPW'>
          <p class="myorder-content" >修改密码</p>
        </li>
        <li class="myorder border-bottom"  @click='ifback'>
            <p class="myorder-content" >注销帐号</p>
        </li>
      </ul>

    </div>
    <popup-box
        v-show="showpopbox"
        :popHeight="popHeight"
        @isconfirm = "isconfirm"
        @iscancel = "iscancel"
    ></popup-box>
    <l-footer></l-footer>
  </div>
</template>

<script>

import axios from 'axios'
import LHeader from '@/components/header/Header'
import LFooter from '@/components/footer/footer'
import PopupBox from '@/components/popUpBox/popUpBox'
import { baseUrl } from '@/assets/js/var.js'

export default {
  name:"UserInfo",
  data (){
    return{
      isBack:false,
      headerText:"个人信息",
      nickname:" ",
      usernum:"",
      sex:"",
      headimgurl:"http://thirdwx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/46",
      isBack: false, // 是否出现提示框
      showpopbox: false,
      popHeight: '是否取消绑定'
    }
  },
  methods:{
    //工作记录
    workRecode (){
      this.$router.push('/workRecode')
    },
    //注销弹出确认框
    ifback () {
      this.showpopbox = true
    },
    //修改密码
    modifyPW (){
      this.$router.push('/modifyPW')
    },
    //注销
    sayGB (){
      axios.get(`${baseUrl}/api/v1.1/washCleanerMember/logout`)
      .then( response => {
        console.log(response.data);
        let data = response.data
				if (data.code == 7001000) {
          alert('注销成功')
					this.$router.replace('/')
          localStorage.removeItem("waterUserInfo");
				}else{
					alert("注销失败,请稍后重试")
				}
      })
      .catch( error => {
        console.log(error);
      })
    },
    isconfirm () {
      this.showpopbox = false
      this.sayGB()
      //console.log('解除绑定成功')
    },
    iscancel () {
      this.showpopbox = false
      return;
    },
	},
  //从本地存储中获取员工信息
  mounted (){
      const obj =  JSON.parse(localStorage.waterUserInfo)
      this.nickname = obj.name
      this.usernum = obj.number
  },
  components:{
    LHeader,
    LFooter,
    PopupBox
  }
}

</script>

<style lang="stylus" scoped>
  .userInfo
    background-color: #f0f0f0
    .userInfo-body
      position: absolute
      top: .86rem
      left: 0
      right: 0
      bottom: .8rem
      .Info
        height: 2rem
        display: flex
        background: #20d9bb
        padding-left: .5rem
				.headimg
          line-height: 2rem
          width: 20%
          .img-content
            width: 1.5rem
            height: 1.5rem
            border-radius: 2rem
        .nicknameAndusername
          flex: 1
          height: 1.5rem
          padding: .3rem 0 0 .5rem
          .nickname-content
            height: .6rem
            line-height: .8rem
            color: #fff
            font-weight: 700
            font-size: .32rem
          .usernum-content
            line-height: .8rem
            color: #fff
            font-size: .3rem
      .menu
        background: #fcfcfc
        margin-top: .4rem
        .myorder
          overflow: hidden
          box-sizing: border-box
          height: .8rem
          line-height: .8rem
          padding: 0 .2rem
        .border-bottom
          &:after
            border-color: #ccc
          &:before
            border-color: #ccc
          .myorder-content
            float: left
            width: 1.5rem
            font-size: .28rem

</style>
